
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Reboot运维平台 </title>
<link href="/static/img/favicon.ico" type="image/x-icon" rel="shortcut icon">

<!--第三方插件样式-->
<link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/vendor/datatable/datatable.css" rel="stylesheet">
<link href="/static/vendor/metismenu/metismenu.min.css" rel="stylesheet">
<link href="/static/vendor/alert/sweet-alert.css" rel="stylesheet">
<link href="/static/vendor/bootstrap-multiselect.css" rel="stylesheet">
<link href="/static/vendor/validform.css" rel="stylesheet">
<link href="/static/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="/static/chosen/css/chosen.min.css" rel="stylesheet" type="text/css">
<link href="/static/chosen/css/chosen-bootstrap.css" rel="stylesheet" type="text/css">
<!--自定义样式文件 ＊重要＊-->
<link href="/static/vendor/sb-admin-2.css" rel="stylesheet">


<style type="text/css">
.navbar-header{
    width: 200px;
    text-align: center;
}
.navbar-brand{
    font-size: 20px;

}
.table{
    margin-top: 10px;
}

.hover{
    cursor: pointer;
}
.progress-reboot{
    position: absolute;
    height: 2px;
    top:0px;
    background: #337ab7;
    width: 0%;
    z-index: 2000;
}

#main-content .add-btn{
    position: absolute;
    z-index:100;
    width: 200px;
}
#wrapper{
    background: #2e3c4e;
}
.navbar-default .navbar-nav>li>a{
    color:white;
}
.navbar-default .navbar-nav>li>a:hover{
    background: #299d71;
}

.navbar-default .navbar-brand{
    color:white;
}

.navbar-default .navbar-brand:hover{
    color:white;
}
.select2-container{
    width: 100% !important;
}
button.detail{
    margin-left: 10px;
}
.sweet-alert h2{
    margin-top: 30px;
}

</style>

    <link rel="stylesheet" href="/static/zTree_v3-master/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <style>
        .ztree * {padding:0; margin:0; font-size:14px;line-height:16px;}
        #product_info{padding-bottom: 25px;}
        #modify{width:100%;height:100%;display: none}
        .controls{display: none;}
        #infomatioin{width:100%;height: 100%;display: none}
        #infomatioin ul li{line-height: 45px;font-size: 16px;}
        #infomatioin ul li label{display: inline-block;width:100px;text-align: right;font-weight: bold;margin-right:25px;}
        #infomatioin ul li button{margin-left:125px;}
        #hostlist{display: none;border-top: 1px solid rgba(255, 255, 255, 0.3);padding-top:10px;}
        #hostlist li{margin-right:10px;min-width:200px;}
        .header-btn{margin-left: 20px;}
    </style>



</head>

<body>
<div id="wrapper"> <!--页面全局样式-->

<!--页面头部导航 -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
    <a class="navbar-brand" href="/">Reboot Admin</a>
    <ul class="nav navbar-nav">
	<li  class="dropdown" id="profile-messages" >
    <a title="" href="#" data-toggle="dropdown" data-target="#profile-messages" class="dropdown-toggle"><i class="fa fa-user fa-fw"></i><span class="text">Admin</span><b class="caret"></b></a>
	    <ul class="dropdown-menu">
		<li><a href="#"><i class="fa fa-user fa-fw"></i>个人中心</a></li>
		<li class="divider"></li>
		<li><a href="#"><i class="fa fa-mail-forward fa-fw"></i>退出登录</a></li>
	    </ul>
	</li>
	<li><a href="/logout/"><i class="fa fa-mail-forward fa-fw" ></i><span>退出登录</span></a></li>
    </ul>
    <ul class="nav navbar-nav pull-right">
        <li><a href="http://www.51reboot.com" target="_blank">Reboot官网</a></li>
        <li><a href="http://59.110.12.72:8000/zabbix/" target="_blank">zabbix</a></li>
    </ul>
    <form class="navbar-form">
        <input type="text" class="form-control" placeholder="Search...">
    </form>
</nav><!--nav  end -->


    <!--页面左边导航-->
<div class="navbar-default sidebar" role="navigation">
    <div class="sidebar-nav navbar-collapse">
        <ul class="nav" id="side-menu">  <!--菜单列表-->
            <li><a href="/"><i class="fa fa-home fa-fw"></i>控制面板</a></li>
            <li> <!--用户管理-->
                <a href="#"><i class="fa fa-user fa-fw" ></i>用户管理<span class="fa arrow"></span></a>
                <ul class="nav nav-second-level  collapse">
                    <li>
                        <a href="/user/list/" class="menu-link" id="menu-userlist">用户列表</a>
                    </li>
                </ul>
            </li> <!--用户管理 end-->

            <li class=""><!--资产平台-->
                <a href="#" ><i class="fa fa-database fa-fw"></i>资源管理<span class="fa arrow"></span></a>
                <ul class="nav nav-second-level collapse" >
                    <li class="">
                        <a href="/server/list/" class="menu-link" id="menu-server-manage">服务器管理</a>
                    </li>
                    <li>
                        <a href="/product/manage/" class="menu-link" id="menu-product-manage">业务线管理</a>
                    </li>
                </ul>
            </li> <!--CMDB资产平台结束-->

            <li><!--代码管理-->
                <a href="#" ><i class="fa fa-file-code-o fa-fw"></i>监控配置<span class="fa arrow"></span></a>
                <ul class="nav nav-second-level collapse" >
                    <li>
                        <a href="/monitor/zabbix/hostrsync/">同步主机到zabbix</a>
                    </li>
                    <li>
                        <a href="/monitor/zabbix/linktemplate/">模板绑定</a>
                    </li>
                </ul>
            </li> <!--代码管理结束-->




        </ul><!--菜单列表结束-->

    </div><!--sidebar-collapse end -->
</div><!--navbar-static-side 左边菜单结束 -->


<!--页面正文部分-->

<div id="page-wrapper">
    <div class="container-fluid">
        <div class="row">
            <div id='main-content' class="col-md-12" style='padding-top:20px;'>
                <div id="content-header">
                  <ul class="breadcrumb">
                    <li><i class="fa fa-home fa-fw"></i><a href="/">dashboard</a><span class="divider"></span></li>

    <li><i class="fa fa-home fa-fw"></i><a href="/">资源</a><span class="divider"></span></li>
    <li><i class="fa fa-home fa-fw"></i><a href="/product/manage/">业务线管理</a><span class="divider"></span></li>
    <a href="/product/add/" class="btn btn-primary btn-sm header-btn">增加业务线</a>

                  </ul>
                  <hr>
                </div><!--end content-header-->


    <div id="content-body">

        <div class="col-xs-3">
           <ul id="treeDemo" class="ztree"></ul>
        </div>
        <div class="col-xs-9">
            <div class="row" id="product_info">
                <div id="infomatioin">
                    <ul class="list-unstyled">
                        <li><label>分类名：</label><span id="info_service_name"></span></li>
                        <li><label>上级分类：</label><span id="info_pid"></span></li>
                        <li><label>字母简称：</label><span id="info_module_letter"></span></li>
                        <li><label>业务负责人：</label><span id="info_dev_interface"></span></li>
                        <li><label>运维负责人：</label><span id="info_op_interface"></span></li>
                        <li>
                            <button class="btn btn-primary" id="info_modify_btn">修改</button>
                        </li>
                    </ul>
                </div>
                <div id="modify">
                    <form class="form-horizontal" role="form" parsley-validate id="basicvalidations" method="post">
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">分类名 *</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="service_name" autocomplete="off" id="input_service_name" parsley-trigger="change" parsley-required="true" parsley-minlength="2" parsley-validation-minlength="1">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">上级分类 *</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" readonly autocomplete="off" id="input_pid" parsley-trigger="change" parsley-required="true" parsley-minlength="2" parsley-validation-minlength="1">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">字母简称 *</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="module_letter" autocomplete="off" id="input_module_letter" parsley-trigger="change" parsley-required="true" parsley-minlength="2" parsley-validation-minlength="1">
                            </div>
                        </div>
                         <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">业务负责人 *</label>
                            <div class="col-sm-8">
                                <select data-placeholder="" multiple="选择联系人" tabindex="3" name="dev_interface" id="input_dev_interface" class="chosen-select form-control chosen-transparent">

                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="input_op_interface" class="col-sm-2 control-label">运维负责人 *</label>
                            <div class="col-sm-8">
                                <select data-placeholder="" multiple="选择联系人" tabindex="3" name="op_interface" id="input_op_interface" class="chosen-select form-control chosen-transparent">

                                </select>
                            </div>
                        </div>
                        <div class="form-group form-footer">
                            <div class="col-sm-offset-4 col-sm-8">
                                <button type="submit" id="submit_modify" class="btn btn-primary">提交</button>
                                <button id="return_info" class="btn btn-default">返回</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="clear"></div>
            </div>
            <div class="row">
                <ul class="list-inline" id="hostlist">
                </ul>
            </div>
        </div>
        <div class="clear"></div>


    </div>

            </div>
        </div>
    </div>
</div>  <!--页面正文部分结束-->

</div><!--页面全局样式结束-->

<!--js 部分-->
    <script src="/static/vendor/jquery/jquery.min.js"></script>
    <script src="/static/vendor/jquery/jquery.cookie.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="/static/vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="/static/chosen/chosen.jquery.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="/static/vendor/datatable/datatable.js"></script>
    <script src="/static/vendor/metismenu/metismenu.min.js"></script>
    <script src="/static/vendor/validform.js"></script>
    <script src="/static/vendor/bootstrap-multiselect.js"></script>
    <script src='/static/vendor/alert/sweet-alert.min.js'></script>
    <script src='/static/parsley/parsley.min.js'></script>
    <script src='/static/js/opsweb.js'></script>


    <script>
        function apply_menu(obj){
            obj.parent('li').addClass("active").parent('ul').addClass('in').attr("aria-expanded","true").siblings('a').attr("aria-expanded","true").parent("li").addClass("active")
        }

        $(function(){
            $("#side-menu").metisMenu();
            /*
            var current_menu_id = $.cookie('current_menu_id');
            if (current_menu_id != "undefined"){
                console.log(current_menu_id);
                apply_menu($("#"+current_menu_id))
            }


            $(".menu-link").click(function(){
                console.log($(this).attr('id'))
                $.cookie('current_menu_id', $(this).attr('id'));
                swal("", "", "success")
            })
            */
        })
    </script>

    <script type="text/javascript" src="/static/zTree_v3-master/js/jquery.ztree.core.js"></script>

    <script>
        var data;
        var hostlist = $("#hostlist");
        var users = false;
        var infomatioin_div = $("#infomatioin");
        var info_service_name = $("#info_service_name");
        var info_pid = $("#info_pid");
        var info_module_letter = $("#info_module_letter");
        var info_dev_interface = $("#info_dev_interface");
        var info_op_interface = $("#info_op_interface");
        var info_modify_btn = $("#info_modify_btn");

        var modify_div = $("#modify");
        var input_service_name = $("#input_service_name");
        var input_pid = $("#input_pid");
        var input_module_letter = $("#input_module_letter");
        var input_dev_interface = $("#input_dev_interface");
        var input_op_interface = $("#input_op_interface");

        var return_info_btn = $("#return_info");
        var submit_modify = $("#submit_modify");
        var products = false
        var id ;

        function show_product_info(){
            infomatioin_div.hide();
            modify_div.hide();
            $.get("/product/manage/get/", {"id": id}, function(res){
                if(res.status == 0){
                    data = res.data
                    infomatioin_div.fadeIn("fast");

                    info_service_name.text(data.service_name);
                    info_pid.text(data.pid);
                    info_module_letter.text(data.module_letter);
                    info_dev_interface.text(data.dev_interface);
                    info_op_interface.text(data.op_interface);
                }else{
                    swal('错误',res.errmsg,"error");
                }

            });
        }

        function show_hostlist(){
            $.get("/server/get/", {"server_purpose": id}, function(res){
                $.each(res, function(n, obj){
                    hostlist.append("<li>"+obj.fields.hostname+"（"+obj.fields.inner_ip+"）</li>");
                });
                hostlist.fadeIn("fast");
            })
        }



        function zTreeOnClick(event, treeId, treeNode) {
            id = treeNode.id ;
            show_product_info()
            hostlist.hide().empty();
            if (treeNode.pid != 0){
                show_hostlist();
            }

        };
        var zTreeObj;
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {
            callback:{
                onClick: zTreeOnClick
            },
            view: {
                fontCss : {fontSize:"16px"}
            }
        };
        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
        var zNodes = [{"children": [{"pid": 1, "name": "web", "id": 2}, {"pid": 1, "name": "wap", "id": 3}, {"pid": 1, "name": "app", "id": 4}, {"pid": 1, "name": "api", "id": 5}], "pid": 0, "name": "\u623f\u4ea7", "id": 1}, {"children": [{"pid": 6, "name": "web", "id": 7}, {"pid": 6, "name": "wap", "id": 8}, {"pid": 6, "name": "app", "id": 9}, {"pid": 6, "name": "api", "id": 10}], "pid": 0, "name": "\u62db\u8058", "id": 6}, {"children": [{"pid": 11, "name": "web", "id": 12}, {"pid": 11, "name": "wap", "id": 13}, {"pid": 11, "name": "app", "id": 14}, {"pid": 11, "name": "api", "id": 15}], "pid": 0, "name": "\u4e8c\u624b", "id": 11}, {"children": [{"pid": 16, "name": "web", "id": 17}, {"pid": 16, "name": "wap", "id": 18}, {"pid": 16, "name": "app", "id": 19}], "pid": 0, "name": "\u670d\u52a1", "id": 16}, {"children": [{"pid": 20, "name": "app", "id": 21}, {"pid": 20, "name": "lalla", "id": 23}], "pid": 0, "name": "\u652f\u4ed8", "id": 20}, {"children": [], "pid": 0, "name": "111", "id": 22}];


        $(function(){
            //chosen select input
            zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

            $.get("/user/list/get/", function(res){
                users = res
            });
            // 点击修改按钮
            info_modify_btn.click(function(){

                infomatioin_div.hide();
                modify_div.fadeIn("fast");


                var selected_dev_email = data.dev_interface.split(","); // 取到数据
                input_dev_interface.empty().chosen("destroy");
                $.each(users, function(n, obj){

                    var dev_option;


                    if ($.inArray(obj.email, selected_dev_email) >= 0){
                        dev_option = '<option value="'+obj.email+'" selected>';
                    }else{
                        dev_option = '<option value="'+obj.email+'">';
                    }
                    dev_option += obj.email+' | '+obj.username+'</option>';
                    input_dev_interface.append(dev_option)

                });


                input_dev_interface.chosen({disable_search_threshold: 10,
                                    no_results_text: "没有找到对应的记录"});
            });

            // 点击返回
            return_info_btn.click(function(){
                modify_div.hide();
                infomatioin_div.fadeIn("fast");
                return false
            });
            // 点击修改
            submit_modify.click(function(){
                var modify_data = {
                    "id": data.id,
                    "service_name": input_service_name.val(),
                    "module_letter": input_module_letter.val(),
                    "dev_interface": input_dev_interface.val(),
                    "op_interface": input_op_interface.val()
                };
                $.post("#", modify_data, function(res){
                    if (res.status == 0){
                        swal({
                            title: "操作成功",
                            text:"",
                            type: "success"
                        },function(){
                           show_product_info()
                        })

                    }else{
                        swal('错误',res.errmsg,"error");
                    }
                });
                return false
            });

            $(".chosen-select").chosen({disable_search_threshold: 10,
                                    no_results_text: "没有找到对应的记录"});
        })

    </script>





</body>

</html>
